<template>
  <van-popup v-model:show="show" class="p-4" round>
    <div class="text-center font-bold mb-2">绑定谷歌</div>
    <div v-if="!info.bind">
      <div class="mb-4 flex items-center justify-around gap-x-2">
        <label for="password">谷歌密钥：</label>
        <input type="text" v-model="info.google_token" class="border rounded p-1" />
        <CopyBtn :text="info.google_token" />
      </div>

      <div class="mb-4">
        <label for="password">谷歌验证码：</label>
        <input type="number" v-model="formRef.googleCode" class="border rounded p-1" />
        <!-- <button @click="verifyCode" class="p-2 text-sm bg-blue-500 rounded-r text-white">
          验证
        </button> -->
      </div>
      <div class="text-right text-sm text-gray-400">请输入6位谷歌验证码</div>
    </div>

    <div v-else>
      <div class="mb-4">
        <label for="password">谷歌验证码：</label>
        <input type="number" v-model="formRef.googleCode" class="border rounded p-1" />
        <button @click="verifyCode" class="p-2 text-sm bg-blue-500 rounded-r text-white">
          验证
        </button>
      </div>

      <div class="text-right text-sm text-gray-400">请输入6位谷歌验证码</div>
    </div>

    <div class="m-2 flex justify-between">
      <button @click="show = false" class="border border-white rounded text-black bg-gray-100 px-4 py-1">
        返回
      </button>
      <button v-if="!info.bind" @click="submit" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
        保存
      </button>
      <button v-else @click="submit_unbind" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
        解绑
      </button>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { computed, defineEmits, ref, onMounted } from 'vue'
import { GetGoogleIndexApi, GoogleEditApi, GoogleValidateApi } from '@/apis/user'
import { showToast } from 'vant'
import CopyBtn from '@/components/CopyBtn.vue'
import { useUserStore } from '@/stores/user'

const { logout } = useUserStore();

const emit = defineEmits(['update:show-modal'])
const formRef = ref({
  google_token: '',
  googleUrl: '',
  use_google: '',
  googleCode: null
})
const info = ref({
  bind: false,
  google_token: '',
  googleUrl: '',
  use_google: '',
  appSrc: ''
})

const verify = ref(false)

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  }
})

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    emit('update:show-modal', val)
  }
})

onMounted(async () => {
  const data = await GetGoogleIndexApi()
  console.log(data)
  info.value = data
})

function verifyCode() {
  GoogleValidateApi({ type: 'acton', googleCode: formRef.value.googleCode })
    .then(() => {
      showToast('验证通过')
      verify.value = true
    })
    .catch(() => {
      showToast('验证失败')
    })
}

function submit() {
  formRef.value.use_google = '1'
  GoogleEditApi({
    use_google: formRef.value.use_google,
    google_token: formRef.value.googleCode
  }).then(() => {
    showToast('绑定成功')
    show.value = false
  })
}

function submit_unbind() {
  if (verify.value) {
    formRef.value.use_google = '0'
    GoogleEditApi({
      use_google: formRef.value.use_google,
      google_token: formRef.value.googleCode
    }).then(() => {
      showToast('解绑成功')
      show.value = false
    })
  }
}
</script>
